$outer-height: 220px;
$outer-height-mobile: 340px;

.container {
  padding: 20px 16px 20px;
  max-height: calc(100vh - #{$outer-height});

  overflow: hidden;
  color: var(--euiTextSubduedColor);
  flex: 1;
  position: relative;

  @media only screen and (max-width: 767px) {
    max-height: calc(100vh - #{$outer-height-mobile});
  }

  > div {
    line-height: 1.19 !important;
    max-height: 100%;
  }
}

.stringValue {
  @include eui.scrollBar;
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-word;
  line-height: 1.2;
  width: 100%;

  pre {
    background-color: transparent !important;
    padding: 0 !important;
  }
}

.tooltipAnchor {
  display: inline-flex !important;
  height: auto;
  max-height: 100%;
  width: 100%;
}

.stringFooterBtn {
  &:global(.euiButton) {
    color: var(--euiTextSubduedColor) !important;
    font-size: 13px;
    height: auto !important;
    padding: 4px 8px;

    :global(.euiButton__text) {
      font-weight: 400 !important;
    }
  }
}
